<script setup lang="ts">
import { MessageTreeDataType, SecsFormat } from '../common/enums';

const props = defineProps<{
    type: MessageTreeDataType,
    format?: SecsFormat
    length?: number
}>()
</script>
<template>
    <i v-if="props.type == MessageTreeDataType.Transaction">
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27313" width="16"
            height="16">
            <path
                d="M640 682.666667a170.666667 170.666667 0 0 0 170.666667-170.666667V256a170.666667 170.666667 0 0 0-170.666667-170.666667H213.333333a170.666667 170.666667 0 0 0-170.666666 170.666667v533.333333a21.333333 21.333333 0 0 0 29.44 19.626667 20.906667 20.906667 0 0 0 6.826666-4.693333l85.333334-85.333334A128 128 0 0 1 256 682.666667h384zM128 640V256a85.333333 85.333333 0 0 1 85.333333-85.333333h426.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v256a85.333333 85.333333 0 0 1-85.333333 85.333333H256a213.333333 213.333333 0 0 0-128 42.666667z m448-213.333333h42.666667a21.333333 21.333333 0 0 0 21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 0-21.333333-21.333334h-42.666667a21.333333 21.333333 0 0 0-21.333333 21.333334v42.666666a21.333333 21.333333 0 0 0 21.333333 21.333334z m-170.666667 0h42.666667a21.333333 21.333333 0 0 0 21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 0-21.333333-21.333334h-42.666667a21.333333 21.333333 0 0 0-21.333333 21.333334v42.666666a21.333333 21.333333 0 0 0 21.333333 21.333334zM298.666667 405.333333v-42.666666a21.333333 21.333333 0 0 0-21.333334-21.333334h-42.666666a21.333333 21.333333 0 0 0-21.333334 21.333334v42.666666a21.333333 21.333333 0 0 0 21.333334 21.333334h42.666666a21.333333 21.333333 0 0 0 21.333334-21.333334zM896 256v341.333333a170.666667 170.666667 0 0 1-170.666667 170.666667H213.333333a85.333333 85.333333 0 0 0 85.333334 85.333333h469.333333a128 128 0 0 1 90.88 37.546667l85.333333 85.333333a20.906667 20.906667 0 0 0 30.037334 0.170667 21.333333 21.333333 0 0 0 6.229333-15.104V341.333333A85.333333 85.333333 0 0 0 896 256z"
                fill="#4770DC"></path>
        </svg>
    </i>
    <i v-if="props.type == MessageTreeDataType.Primary">
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path
                d="M514.29 257.53c137.98 1.23 249.48 113.46 249.48 251.75 0 44.76-11.69 86.81-32.16 123.22-41.8 74.32-120.23 125.29-210.8 128.39-1.01 0.04-2.01 0.06-3.02 0.07-0.66 0.01-1.32 0.02-1.96 0.04-1.27 0.02-2.55 0.04-3.82 0.04-53 0-96.35-43.35-96.35-96.35 0-24.63 9.36-47.18 24.7-64.25 1.17-1.29 2.36-2.56 3.59-3.79 17.47-17.47 41.56-28.31 68.06-28.31 85.82 0 155.41-69.57 155.41-155.41-0.01-85.07-68.37-154.17-153.13-155.4z"
                fill="#4770DC"></path>
            <path
                d="M608.35 161.16c139.04 0 251.76 112.72 251.76 251.76 0 1.27-0.01 2.55-0.04 3.82-0.01 0.65-0.02 1.31-0.04 1.96-0.01 1.01-0.04 2.01-0.07 3.02-4.58 185.27-153.9 334.58-339.16 339.17 90.57-3.11 169-54.07 210.8-128.39 20.48-36.42 32.16-78.46 32.16-123.22 0-138.29-111.5-250.52-249.48-251.75-0.77-0.01-1.53-0.01-2.29-0.01-1.34 0-2.67 0.01-4.02 0.05-82.64 2.1-149.26 68.72-151.34 151.34 0.66-43.27 12.25-83.88 32.13-119.22 43.14-76.71 125.32-128.53 219.59-128.53z"
                fill="#6F94F4"></path>
            <path
                d="M512 64.8c192.26 0 348.12 155.86 348.12 348.12 0-139.05-112.73-251.76-251.76-251.76-94.28 0-176.46 51.82-219.59 128.53-19.88 35.33-31.47 75.95-32.13 119.22-0.04 1.34-0.05 2.67-0.05 4.02v449.92c0 53-43.37 96.35-96.35 96.35-53 0-96.35-43.35-96.35-96.35V412.92c0-136.41 78.45-254.49 192.71-311.59C403.36 77.96 456.15 64.8 512 64.8z"
                fill="#97B4FF"></path>
        </svg>
    </i>
    <i v-if="props.type == MessageTreeDataType.Secondary">
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path
                d="M633.95 608.35h19.94a345.233 345.233 0 0 1-23.01 59.06C603.62 721.98 562.44 768.36 512 801.96c-29.29 19.51-61.72 34.7-96.35 44.65-30.6 8.8-62.92 13.51-96.35 13.51h-59.06c-22.42 0-43.1-7.76-59.53-20.73-22.39-17.68-36.83-45.06-36.83-75.63 0-33.98 17.84-64 44.61-81.16 14.97-9.61 32.74-15.19 51.75-15.19H512c49.45 0 93.48-23.09 121.95-59.06z"
                fill="#4770DC"></path>
            <path
                d="M860.12 512c0 55.85-13.15 108.64-36.53 155.41-43.1 86.26-120.97 152.1-215.24 179.19-30.6 8.8-62.92 13.51-96.35 13.51H319.29c33.43 0 65.76-4.71 96.35-13.51 34.64-9.95 67.06-25.14 96.35-44.65 50.44-33.59 91.62-79.98 118.88-134.55a344.091 344.091 0 0 0 23.01-59.06H260.24c-52.99 0-96.35-43.35-96.35-96.35 0-55.85 13.15-108.64 36.53-155.41 43.1-86.26 120.97-152.1 215.24-179.19 30.6-8.8 62.92-13.51 96.35-13.51h192.71c-33.43 0-65.76 4.71-96.35 13.51-34.64 9.95-67.06 25.14-96.35 44.65-50.44 33.59-91.62 79.98-118.88 134.55a344.091 344.091 0 0 0-23.01 59.06h393.66c52.98 0 96.33 43.36 96.33 96.35z"
                fill="#6F94F4"></path>
            <path
                d="M860.12 260.24c0 26.49-10.84 50.59-28.3 68.06a97.62 97.62 0 0 1-16.3 13.12c-14.97 9.6-32.75 15.18-51.76 15.18H512c-49.43 0-93.48 23.09-121.95 59.06H370.1a345.233 345.233 0 0 1 23.01-59.06c27.27-54.57 68.44-100.95 118.88-134.55 29.29-19.51 61.72-34.7 96.35-44.65 30.6-8.8 62.92-13.51 96.35-13.51h59.06c22.42 0 43.1 7.76 59.53 20.73 22.4 17.67 36.84 45.04 36.84 75.62z"
                fill="#97B4FF"></path>
        </svg>
    </i>
    <template v-else>
        <span v-if="props.format == SecsFormat.List" style="color: var(--color-deep-1);">L [{{ props.length }}]</span>
        <span v-else-if="props.format == SecsFormat.Binary" style="color: var(--color-deep-1);">B</span>
        <span v-else-if="props.format == SecsFormat.Boolean" style="color: var(--color-deep-1);">BL</span>
        <span v-else-if="props.format == SecsFormat.AscII" style="color: var(--color-deep-1);">A</span>
        <span v-else-if="props.format == SecsFormat.Jis8" style="color: var(--color-deep-1);">J</span>
        <span v-else-if="props.format == SecsFormat.F8" style="color: var(--color-deep-1);">F8</span>
        <span v-else-if="props.format == SecsFormat.F4" style="color: var(--color-deep-1);">F4</span>
        <span v-else-if="props.format == SecsFormat.I8" style="color: var(--color-deep-1);">I8</span>
        <span v-else-if="props.format == SecsFormat.I1" style="color: var(--color-deep-1);">I1</span>
        <span v-else-if="props.format == SecsFormat.I2" style="color: var(--color-deep-1);">I2</span>
        <span v-else-if="props.format == SecsFormat.I4" style="color: var(--color-deep-1);">I4</span>
        <span v-else-if="props.format == SecsFormat.U8" style="color: var(--color-deep-1);">U8</span>
        <span v-else-if="props.format == SecsFormat.U1" style="color: var(--color-deep-1);">U1</span>
        <span v-else-if="props.format == SecsFormat.U2" style="color: var(--color-deep-1);">U2</span>
        <span v-else-if="props.format == SecsFormat.U4" style="color: var(--color-deep-1);">U4</span>
    </template>
</template>